<template>
  <div class="water-flow-wrap">
    <div class="title flex-between">
      <div class="title-l">
        <span>曲线趋势图</span>
      </div>
    </div>
    <div class="filter flex-row">
      <div class="date-picker flex-row">
        <el-date-picker
          v-model="startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yy-MM-dd HH:mm"
          :editable="false"
          :clearable="false"
          popper-class="data-picker-panel-popper-blue"
          type="datetime"
          placeholder="选择日期时间"
          @change="startTimeChange"
        />
        <span>——</span>
        <el-date-picker
          v-model="endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yy-MM-dd HH:mm"
          :editable="false"
          :clearable="false"
          popper-class="data-picker-panel-popper-blue"
          type="datetime"
          placeholder="选择日期时间"
          @change="endTimeChange"
        />
      </div>
      <img
        class="filter-btn"
        src="@/assets/img/search.png"
        alt=""
        srcset=""
        @click="handleGetDate"
      >
    </div>
    <div class="echarts flex-between">
      <!-- 涌水量 -->
      <div class="echartsItem">
        <WaterLevelEcharts ref="WaterLevel" :mp-id="mpId" :start-time="startTime" :end-time="endTime" style="width: 100%; height: 100%" />
      </div>

      <!-- <div class="echartsItem">
        <WaterTemperatureEcharts ref="WaterTemperature" style="width: 100%; height: 100%" />
      </div> -->
      <!-- 水压 -->
      <div class="echartsItem">
        <WaterPressureEcharts ref="WaterPressure" :mp-id="mpId" :start-time="startTime" :end-time="endTime" style="width: 100%; height: 100%" />
      </div>
    </div>
  </div>
</template>

<script>
import MixinTime from '@/views/components/MixinTime'
import WaterLevelEcharts from './waterLevelEcharts'
import WaterPressureEcharts from './waterPressureEcharts'
export default {
    name: 'DrainageAnalysis',
    components: {
        WaterLevelEcharts,
        WaterPressureEcharts
    },
    mixins: [MixinTime],
    props: {
        mpId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {

        }
    },
    computed: {},

    methods: {
        handleGetDate() {
            this.$refs.WaterLevel.getData()
            // this.$refs.WaterTemperature.getData()
            this.$refs.WaterPressure.getData()
        }
    }
}
</script>

<style lang='scss' scoped>
.echarts {
  height: calc(100% - 100px);
  .echartsItem {
    width: 30%;
    height: 100%;
  }
}
.title {
  height: 40px;
}
.filter {
  span {
    margin: 0 10px;
  }
}

.filter-btn {
  width: 80px;
  height: 26px;
  margin-left: 100px;
}
.water-flow-wrap {
  width: 100%;
  height: 100%;
  color: #d6d6d6;
  padding: 0 20px;
}
</style>
